<template>
  <div class="vue-app-container">
    <!-- SECTION: 顶部导航栏 -->
    <div class="header-container">
      <div class="container">
        <el-row :gutter="20" justify="space-between" align="middle">
          <el-col :span="6" :xs="12" :sm="6" :md="6" :lg="4">
            <div class="header-logo" @click="headerHandleLogoClick">
              <img
                src="https://picsum.photos/150/50"
                alt="Blog Logo"
                class="logo-image"
              />
            </div>
          </el-col>
          <el-col :span="12" :xs="0" :sm="12" :md="12" :lg="14">
            <el-menu
              mode="horizontal"
              class="header-menu"
              :default-active="headerActiveIndex"
              @select="headerHandleMenuSelect"
            >
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">分类</el-menu-item>
              <el-menu-item index="3">专栏</el-menu-item>
              <el-menu-item index="4">关于</el-menu-item>
              <el-menu-item index="5">归档</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="6" :xs="12" :sm="6" :md="6" :lg="6">
            <div class="header-actions">
              <el-input
                placeholder="搜索文章..."
                v-model="headerSearchQuery"
                class="header-search"
                clearable
                @keyup.enter="headerHandleSearch"
              >
                <template #prefix>
                  <el-icon><search /></el-icon>
                </template>
              </el-input>
              <el-button
                circle
                class="header-user-action"
                @click="headerHandleUserClick"
              >
                <el-avatar
                  size="small"
                  src="https://picsum.photos/40/40"
                />
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- /SECTION: 顶部导航栏 -->

    <!-- SECTION: 英雄区域 -->
    <div class="section-yingxiongquyu">
      <div class="container">
        <el-row :gutter="20" justify="center">
          <el-col :span="24" :xs="24" :sm="24" :md="20" :lg="18">
            <div class="hero-container">
              <div class="hero-content">
                <h1 class="hero-title">探索技术与创意的世界</h1>
                <p class="hero-subtitle">发现前沿技术文章、实用开发技巧和创意设计灵感</p>
                <div class="hero-actions">
                  <button class="hero-button primary">开始阅读</button>
                  <button class="hero-button outline">订阅更新</button>
                </div>
              </div>
              <div class="hero-image">
                <img src="https://picsum.photos/800/500?random=1" alt="技术博客封面" class="hero-img">
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- /SECTION: 英雄区域 -->

    <!-- SECTION: 主要内容区 -->
    <div class="section-zhuyaoneirongqu">
      <div class="container">
        <el-row :gutter="20">
          <el-col :span="18" :xs="24" :sm="24" :md="18" :lg="18">
            <!-- 最新文章区域 -->
            <div class="zui-xin-wenzhang">
              <h2 class="section-title">最新文章</h2>
              <el-row :gutter="20">
                <el-col
                  :span="24"
                  :xs="24"
                  :sm="12"
                  :md="12"
                  :lg="8"
                  v-for="n in 6"
                  :key="n"
                  class="article-card-col"
                >
                  <div
                    class="article-card"
                    @mouseenter="zuiXinHandleHover(n)"
                    @mouseleave="zuiXinHandleLeave(n)"
                  >
                    <div class="article-image">
                      <img
                        :src="`https://picsum.photos/300/200?random=${n}`"
                        alt="文章封面"
                        :style="{ transform: zuiXinHovered[n] ? 'scale(1.05)' : 'scale(1)' }"
                      >
                    </div>
                    <div class="article-content">
                      <h3 class="article-title">文章标题 {{n}}</h3>
                      <p class="article-excerpt">这里是文章的简短摘要内容，简要描述文章的核心观点...</p>
                      <div class="article-meta">
                        <span class="article-date">2023-06-{10+n}</span>
                        <span class="article-views">1.{n}K 阅读</span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 热门分类区域 -->
            <div class="re-men-fenlei">
              <h2 class="section-title">热门分类</h2>
              <el-row :gutter="20">
                <el-col
                  :span="12"
                  :xs="24"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  v-for="(category, index) in reMenCategories"
                  :key="index"
                >
                  <div
                    class="category-card"
                    :style="{ backgroundColor: category.color }"
                  >
                    <div class="category-icon">
                      <i :class="category.icon"></i>
                    </div>
                    <div class="category-info">
                      <h3>{{ category.name }}</h3>
                      <p>{{ category.count }} 篇文章</p>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>

          <!-- 侧边栏区域 -->
          <el-col :span="6" :xs="24" :sm="24" :md="6" :lg="6">
            <div class="sidebar">
              <!-- 关于作者 -->
              <div class="sidebar-widget about-author">
                <h3 class="widget-title">关于作者</h3>
                <div class="author-content">
                  <img
                    src="https://picsum.photos/100/100?random=100"
                    alt="作者头像"
                    class="author-avatar"
                  >
                  <p class="author-bio">这里是作者的简短介绍，描述作者的专业领域和个人特点...</p>
                  <el-button type="primary" size="small" class="author-button">了解更多</el-button>
                </div>
              </div>

              <!-- 热门标签 -->
              <div class="sidebar-widget hot-tags">
                <h3 class="widget-title">热门标签</h3>
                <div class="tags-container">
                  <el-tag
                    v-for="(tag, index) in reMenTags"
                    :key="index"
                    :type="tag.type"
                    size="medium"
                    class="tag-item"
                  >
                    {{ tag.name }}
                  </el-tag>
                </div>
              </div>

              <!-- 订阅表单 -->
              <div class="sidebar-widget subscribe-form">
                <h3 class="widget-title">订阅更新</h3>
                <el-form>
                  <el-form-item>
                    <el-input v-model="dingYueEmail" placeholder="输入您的邮箱" />
                  </el-form-item>
                  <el-button
                    type="primary"
                    class="subscribe-button"
                    @click="dingYueHandleSubmit"
                  >
                    订阅
                  </el-button>
                </el-form>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- /SECTION: 主要内容区 -->

    <!-- SECTION: 特色专栏 -->
    <div class="section-tesezhuanlan">
      <div class="container">
        <el-row :gutter="20" justify="center">
          <el-col :span="24">
            <h2 class="section-title">特色专栏</h2>
            <p class="section-subtitle">探索我们的精选内容系列</p>
          </el-col>

          <el-col
            v-for="(column, index) in teseColumns"
            :key="index"
            :span="24"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            class="column-item"
          >
            <div
              class="column-card"
              @mouseenter="teseHandleHover(index)"
              @mouseleave="teseHandleLeave(index)"
              :class="{'hovered': teseHoverStates[index]}"
            >
              <div class="column-image">
                <img :src="column.image" :alt="column.title">
                <div class="column-badge">{{ column.category }}</div>
              </div>
              <div class="column-content">
                <h3>{{ column.title }}</h3>
                <p class="column-desc">{{ column.description }}</p>
                <div class="column-meta">
                  <span class="column-author">{{ column.author }}</span>
                  <span class="column-date">{{ column.date }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- /SECTION: 特色专栏 -->

    <!-- SECTION: 页脚 -->
    <footer class="section-yejiao">
      <div class="container">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="24" :xs="24" :sm="8" :md="8" :lg="8" class="footer-column">
            <div class="footer-logo" @click="yejiaoHandleLogoClick">
              <img src="https://picsum.photos/150/50" alt="Website Logo" class="logo-image">
            </div>
            <p class="footer-description">分享技术见解与生活思考</p>
            <div class="contact-info">
              <p><i class="el-icon-message"></i> contact@example.com</p>
              <p><i class="el-icon-phone"></i> +123 456 7890</p>
            </div>
          </el-col>

          <el-col :span="24" :xs="24" :sm="8" :md="8" :lg="8" class="footer-column">
            <h3 class="footer-title">快速链接</h3>
            <ul class="footer-links">
              <li v-for="(link, index) in yejiaoQuickLinks" :key="index"
                  @click="yejiaoHandleLinkClick(link)"
                  class="link-item">
                {{ link.text }}
              </li>
            </ul>
          </el-col>

          <el-col :span="24" :xs="24" :sm="8" :md="8" :lg="8" class="footer-column">
            <h3 class="footer-title">关注我们</h3>
            <div class="social-links">
              <div v-for="(social, index) in yejiaoSocialLinks" :key="index"
                   class="social-icon"
                   @click="yejiaoHandleSocialClick(social)">
                <i :class="social.icon"></i>
              </div>
            </div>
            <div class="newsletter">
              <h4>订阅更新</h4>
              <div class="subscribe-form">
                <input type="email" placeholder="输入您的邮箱" class="subscribe-input">
                <button class="subscribe-button" @click="yejiaoHandleSubscribe">订阅</button>
              </div>
            </div>
          </el-col>

          <el-col :span="24" class="copyright">
            <p>&copy; {{ yejiaoCurrentYear }} 技术博客. 保留所有权利.</p>
          </el-col>
        </el-row>
      </div>
    </footer>
    <!-- /SECTION: 页脚 -->  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeMount,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured} from 'vue';
// 组件名: BlogHome
// 页面状态
const pageTitle = ref('博客网站首页');
// 更多响应式数据可以在这里定义
const state = reactive({
  loading: false,
  // 更多状态数据
});

// 计算属性
const computedValue = computed(() => {
  return pageTitle.value;
});

// 方法定义
const handleAction = () => {
  console.log('执行操作');
};

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
  // 初始化逻辑
});

// 顶部导航栏 组件代码
const headerActiveIndex = ref('1')
const headerSearchQuery = ref('')

const headerHandleLogoClick = () => {
  console.log('Logo clicked')
}

const headerHandleMenuSelect = (index) => {
  headerActiveIndex.value = index
  console.log('Menu selected:', index)
}

const headerHandleSearch = () => {
  if (headerSearchQuery.value.trim()) {
    console.log('Searching for:', headerSearchQuery.value)
  }
}

const headerHandleUserClick = () => {
  console.log('User action clicked')
}

onMounted(() => {
  console.log('Header mounted')
})

// 英雄区域 组件代码
const yxqyActiveIndex = ref(0)
const yxqyArticles = ref([
  {
    title: 'Vue 3高级技巧与最佳实践',
    excerpt: '探索Vue 3的最新特性及其在实际项目中的应用',
    image: 'https://picsum.photos/800/500?random=2'
  },
  {
    title: '现代CSS布局完全指南',
    excerpt: '掌握Flexbox和Grid布局的实用技巧',
    image: 'https://picsum.photos/800/500?random=3'
  },
  {
    title: 'JavaScript性能优化策略',
    excerpt: '提升前端应用性能的20个实用技巧',
    image: 'https://picsum.photos/800/500?random=4'
  }
])

const yxqyNextSlide = () => {
  yxqyActiveIndex.value = (yxqyActiveIndex.value + 1) % yxqyArticles.value.length
}

const yxqyPrevSlide = () => {
  yxqyActiveIndex.value = (yxqyActiveIndex.value - 1 + yxqyArticles.value.length) % yxqyArticles.value.length
}

onMounted(() => {
  setInterval(yxqyNextSlide, 5000)
})

// 主要内容区 组件代码
const zuiXinHovered = ref(Array(6).fill(false));

const zuiXinHandleHover = (index) => {
  zuiXinHovered.value[index] = true;
};

const zuiXinHandleLeave = (index) => {
  zuiXinHovered.value[index] = false;
};

const reMenCategories = ref([
  { name: '前端开发', count: 56, icon: 'el-icon-monitor', color: 'var(--primary-color)' },
  { name: '后端技术', count: 42, icon: 'el-icon-cpu', color: 'var(--secondary-color)' },
  { name: '设计艺术', count: 28, icon: 'el-icon-brush', color: 'var(--accent-color)' },
  { name: '产品运营', count: 35, icon: 'el-icon-data-line', color: '#9b59b6' }
]);

const reMenTags = ref([
  { name: 'Vue.js', type: '' },
  { name: 'React', type: 'success' },
  { name: 'Node.js', type: 'info' },
  { name: 'CSS', type: 'warning' },
  { name: 'JavaScript', type: 'danger' },
  { name: 'UI设计', type: '' }
]);

const dingYueEmail = ref('');

const dingYueHandleSubmit = () => {
  if (dingYueEmail.value) {
    ElMessage.success('订阅成功！');
    dingYueEmail.value = '';
  } else {
    ElMessage.warning('请输入有效的邮箱地址');
  }
};

// 特色专栏 组件代码
const teseColumns = ref([
  {
    title: '前端工程化实践',
    description: '深入探讨现代前端开发的最佳实践和工具链',
    category: '前端',
    author: '张工程师',
    date: '2023-10-15',
    image: 'https://picsum.photos/300/200?random=1'
  },
  {
    title: '设计系统构建指南',
    description: '从零开始构建可扩展的设计系统',
    category: '设计',
    author: '李设计师',
    date: '2023-09-28',
    image: 'https://picsum.photos/300/200?random=2'
  },
  {
    title: 'Node.js性能优化',
    description: '提升后端服务性能的实用技巧',
    category: '后端',
    author: '王架构师',
    date: '2023-10-05',
    image: 'https://picsum.photos/300/200?random=3'
  },
  {
    title: '移动端适配方案',
    description: '全面解析多端适配的现代解决方案',
    category: '移动端',
    author: '赵全栈',
    date: '2023-09-20',
    image: 'https://picsum.photos/300/200?random=4'
  }
]);

const teseHoverStates = ref(Array(teseColumns.value.length).fill(false));

const teseHandleHover = (index) => {
  teseHoverStates.value[index] = true;
};

const teseHandleLeave = (index) => {
  teseHoverStates.value[index] = false;
};

onMounted(() => {
  // 可以在这里添加初始化逻辑
});

// 页脚 组件代码
const yejiaoCurrentYear = ref(new Date().getFullYear());

const yejiaoQuickLinks = ref([
  { text: '首页', path: '/' },
  { text: '关于我们', path: '/about' },
  { text: '文章分类', path: '/categories' },
  { text: '热门标签', path: '/tags' },
  { text: '作者专栏', path: '/authors' }
]);

const yejiaoSocialLinks = ref([
  { icon: 'el-icon-star-on', name: 'GitHub', url: '#' },
  { icon: 'el-icon-thumb', name: 'Twitter', url: '#' },
  { icon: 'el-icon-share', name: 'Facebook', url: '#' },
  { icon: 'el-icon-chat-dot-round', name: 'LinkedIn', url: '#' }
]);

const yejiaoHandleLogoClick = () => {
  // 处理logo点击
};

const yejiaoHandleLinkClick = (link) => {
  // 处理链接点击
};

const yejiaoHandleSocialClick = (social) => {
  // 处理社交媒体点击
};

const yejiaoHandleSubscribe = () => {
  // 处理订阅
};

onMounted(() => {
  // 页脚初始化逻辑
});
</script>

<style scoped>
.vue-app-container {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f8f9fa;
  color: #333;
  min-height: 100vh;
  padding: 20px;
  overflow: auto;
}

/* 使用Element Plus组件库的样式 */
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

/* 自定义Element Plus样式 */
.custom-element {
  /* 自定义Element Plus样式可以在这里添加 */
}

/* 组件样式占位符 */
/* 顶部导航栏 */
.顶部导航栏 {
  /* 样式将在组件生成时添加 */
}

/* 英雄区域 */
.英雄区域 {
  /* 样式将在组件生成时添加 */
}

/* 主要内容区 */
.主要内容区 {
  /* 样式将在组件生成时添加 */
}

/* 特色专栏 */
.特色专栏 {
  /* 样式将在组件生成时添加 */
}

/* 页脚 */
.页脚 {
  /* 样式将在组件生成时添加 */
}


/* 顶部导航栏 样式 */
.header-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--el-bg-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding: 10px 0;
}

.header-logo {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.header-logo:hover {
  transform: scale(1.05);
}

.logo-image {
  height: 40px;
  width: auto;
  border-radius: 4px;
}

.header-menu {
  border-bottom: none;
  justify-content: center;
}

.header-menu :deep(.el-menu-item) {
  font-weight: 500;
  transition: color 0.3s ease;
  margin: 0 5px;
  border-radius: 4px;
}

.header-menu :deep(.el-menu-item:hover) {
  color: var(--primary-color);
  background-color: transparent;
}

.header-menu :deep(.el-menu-item.is-active) {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

.header-search {
  max-width: 200px;
  transition: all 0.3s ease;
}

.header-search:hover {
  max-width: 220px;
}

.header-user-action {
  transition: all 0.3s ease;
}

.header-user-action:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .header-search {
    display: none;
  }

  .header-actions {
    justify-content: flex-end;
  }
}

/* 英雄区域 样式 */
.section-yingxiongquyu {
  padding: 4rem 0;
  background-color: var(--bg-color-light);
  position: relative;
  overflow: hidden;
}

.hero-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  position: relative;
}

.hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  z-index: 2;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-color-dark);
  line-height: 1.2;
  animation: fadeInDown 0.8s ease-out;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-color-secondary);
  margin-bottom: 2rem;
  animation: fadeIn 1s ease-out 0.3s both;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  animation: fadeIn 1s ease-out 0.6s both;
}

.hero-button {
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.hero-button.primary {
  background-color: var(--primary-color);
  color: white;
}

.hero-button.primary:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-2px);
}

.hero-button.outline {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.hero-button.outline:hover {
  background-color: var(--primary-color-light);
  transform: translateY(-2px);
}

.hero-image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: fadeIn 1s ease-out 0.9s both;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.hero-img:hover {
  transform: scale(1.02);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-button {
    width: 100%;
    max-width: 250px;
  }
}

/* 主要内容区 样式 */
.section-zhuyaoneirongqu {
  padding: 40px 0;
  background-color: #f9f9f9;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.section-title {
  font-size: 24px;
  color: var(--primary-color);
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

/* 文章卡片样式 */
.article-card-col {
  margin-bottom: 20px;
}

.article-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.article-image {
  overflow: hidden;
  height: 180px;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.article-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-title {
  font-size: 18px;
  margin: 0 0 10px;
  color: #333;
}

.article-excerpt {
  color: #666;
  font-size: 14px;
  margin: 0 0 15px;
  flex: 1;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

/* 分类卡片样式 */
.category-card {
  border-radius: 8px;
  padding: 20px;
  color: white;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.category-icon {
  font-size: 32px;
  margin-right: 15px;
}

.category-info h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.category-info p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 侧边栏样式 */
.sidebar {
  position: sticky;
  top: 20px;
}

.sidebar-widget {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.widget-title {
  font-size: 18px;
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 关于作者样式 */
.about-author .author-content {
  text-align: center;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 3px solid var(--primary-color);
}

.author-bio {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.author-button {
  width: 100%;
}

/* 热门标签样式 */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item:hover {
  transform: scale(1.05);
}

/* 订阅表单样式 */
.subscribe-button {
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 20px;
  }

  .article-image {
    height: 150px;
  }

  .category-card {
    padding: 15px;
  }
}

/* 特色专栏 样式 */
.section-tesezhuanlan {
  padding: 60px 0;
  background-color: var(--bg-color, #f9f9f9);
}

.section-title {
  text-align: center;
  font-size: 2rem;
  color: var(--primary-color, #3498db);
  margin-bottom: 10px;
  font-weight: 600;
}

.section-subtitle {
  text-align: center;
  color: var(--text-secondary, #666);
  margin-bottom: 40px;
  font-size: 1rem;
}

.column-item {
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.column-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.column-card.hovered {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.column-image {
  position: relative;
  height: 0;
  padding-bottom: 60%;
  overflow: hidden;
}

.column-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.column-card.hovered .column-image img {
  transform: scale(1.05);
}

.column-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--secondary-color, #2ecc71);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.column-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.column-content h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--text-primary, #333);
}

.column-desc {
  color: var(--text-secondary, #666);
  font-size: 0.9rem;
  margin-bottom: 15px;
  flex: 1;
}

.column-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted, #999);
  margin-top: auto;
}

@media (max-width: 768px) {
  .section-tesezhuanlan {
    padding: 40px 0;
  }

  .section-title {
    font-size: 1.5rem;
  }
}

/* 页脚 样式 */
.section-yejiao {
  background-color: var(--footer-bg, #2c3e50);
  color: var(--footer-text, #ecf0f1);
  padding: 3rem 0 1rem;
  transition: all 0.3s ease;
}

.footer-column {
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.footer-logo {
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.footer-logo:hover {
  transform: scale(1.05);
}

.logo-image {
  max-width: 150px;
  height: auto;
  border-radius: 4px;
}

.footer-description {
  margin: 1rem 0;
  line-height: 1.6;
  color: var(--footer-secondary-text, #bdc3c7);
}

.contact-info {
  margin-top: 1.5rem;
}

.contact-info p {
  margin: 0.5rem 0;
  display: flex;
  align-items: center;
}

.contact-info i {
  margin-right: 0.5rem;
  color: var(--primary-color, #3498db);
}

.footer-title {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
  color: var(--footer-heading, #ffffff);
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: var(--primary-color, #3498db);
}

.footer-links {
  list-style: none;
  padding: 0;
}

.link-item {
  margin: 0.8rem 0;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0.3rem 0;
}

.link-item:hover {
  color: var(--primary-color, #3498db);
  transform: translateX(5px);
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--footer-social-bg, #34495e);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: var(--primary-color, #3498db);
  transform: translateY(-3px);
}

.social-icon i {
  font-size: 1.2rem;
  color: var(--footer-text, #ecf0f1);
}

.newsletter h4 {
  margin-bottom: 1rem;
  font-weight: normal;
}

.subscribe-form {
  display: flex;
  margin-top: 1rem;
}

.subscribe-input {
  flex: 1;
  padding: 0.6rem;
  border: none;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.subscribe-button {
  padding: 0 1rem;
  background-color: var(--primary-color, #3498db);
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.subscribe-button:hover {
  background-color: var(--primary-hover, #2980b9);
}

.copyright {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--footer-border, #34495e);
  color: var(--footer-secondary-text, #bdc3c7);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .footer-column {
    text-align: center;
  }

  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .social-links {
    justify-content: center;
  }
}
</style>
